<template>
	<view class="wrap">
		<view class="filter">
			<view class="filter-item btn btn-add"
				@click="navTo('/pages/sys/workbench/productList-return',{currentIndex: queryParam.currentIndex})">
				{{queryParam.currentIndex ? '补料' : '新增'}}
			</view>
			<view class="filter-item btn btn-delete" @click="deleteProduct">
				删除
			</view>
		</view>
		<!-- <mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="loadData"> -->
			<view v-for="(item,index) in list" :key="index">
				<u-card class="task-list-item" :border="false" padding="20" margin="20rpx" v-if="item.gainStatus !== 3">
					<!-- <view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
				<view style="display: flex;align-items: center;font-size: 30rpx;">XSD00001</view><view style="color: #999999;font-size: 22rpx;">2022年10月24日</view>
			</view> -->
					<view class="" slot="body">
						<u-row gutter="16">
							<u-col span="1">
								<view class="info-index">
									{{index + 1}}
								</view>
							</u-col>
							<u-col span="9">
								<view class="apply-text"><span>产品编号：</span>{{ item.productCode  || '' }}</view>
								<view class="apply-text"><span>型号：</span>{{ item.model || '' }}</view>
								<view class="apply-text"><span>颜色：</span>{{ item.color || '' }}</view>
								<view class="apply-text"><span>规格：</span>{{ item.spec || '' }}</view>
								<view class="apply-text"><span>品牌：</span>{{ item.brand || '' }}</view>
								<view class="apply-text">
									
										<view v-if="false">
											<span>仓库：</span>{{ item.warehouseName || '' }}
										</view>
										<view v-else style="display: flex;">
											<view style="line-height: 70rpx;">仓库：</view>
											<u-input  size="small" style="width: 180rpx;" v-model="item.warehouseName" :clearable="true"
												placeholder="请选择仓库" type="select" :select-open="showWarehouse"
												@click="showWarehouseSelect(item,index)"></u-input>
										</view>
								</view>
								<view class="apply-text" >
									<view v-if="false">
										<span>仓位：</span>{{ item.spaceName || '' }}
									</view>
									<view v-else style="display: flex;">
										<view style="line-height: 70rpx;">仓位：</view>
										<u-input  size="small" style="width: 180rpx;" v-model="item.spaceName" :clearable="true"
											placeholder="请选择仓位" type="select" :select-open="showSpace"
											@click="showSpaceSelect(item,index)"></u-input>
									</view>
								</view>
								<view class="apply-text" v-if="item.checked">
									<span>库存：</span>{{ item.stock || 0 }}
								</view>
								<view class="apply-text" v-if="!queryParam.currentIndex || (queryParam.currentIndex && !item.id)">
									<view v-if="false">
										<span>待退数量(片)：</span>{{ item.number || 0 }}
									</view>
									<view v-else style="display: flex;">
										<view style="line-height: 50rpx;">待退数量(片)：</view>
										<u-number-box v-model="item.number"></u-number-box>
									</view>
								</view> 
								<!-- <view class="apply-text" v-else><span>已领数量(片)：</span>{{ item.receivedNumber || 0 }}</view> -->
								
								<view class="apply-text">
									<span>备注：</span>
									<!-- 0-物料 1-补料 2-退料 -->
									<!-- <span v-if="item.productType == 0">物料</span>
									<span v-if="item.productType == 1">补料</span>
									<span v-if="item.productType == 2">退料</span> -->
									<u-input v-model="item.remark" type="textarea" border></u-input>
								</view>
							</u-col> 
							<u-col span="2">
								<u-checkbox size="50rpx" @click.prevent :customStyle="{marginBottom: '8px'}"
									:disabled="!!queryParam.currentIndex && !!item.id"
									v-model="item.checked"></u-checkbox>
							</u-col>
							<!-- 	<u-col style="margin-top: 10pt;" span="12">
						<u-row gutter="16">
							<u-col span="3">
							<u-button type="primary" @click="showReceive(item)">领料</u-button>
							</u-col>
							<u-col span="3">
							<u-button type="success" @click="navTo('/pages/sys/workbench/productList',item)">改料</u-button>
							</u-col>
							<u-col span="3">
							<u-button type="warning" @click="show = true">补料</u-button>
							</u-col>
							<u-col span="3">
							<u-button type="error" @click="deleteProduct(item,index)">删除</u-button>
							</u-col>
						</u-row>
					</u-col> -->
						</u-row>
					</view>
				</u-card>
			</view>
		<!-- </mescroll-uni> -->

		<u-row :gutter="32" class="bottom-box" justify="center">
			<u-col span="12">
				<view><u-button type="primary" shape="circle" @click="submit()">确定</u-button></view>
			</u-col>
		</u-row>
		<!-- 		<view class="btn-plus" @click="navTo('/pages/sys/workbench/productList',{})">
			<u-icon name="plus"></u-icon>
		</view> -->
		<u-popup v-model="show" mode="center" border-radius="14">
			<view class="popup">
				<view class="apply-text"><span>需领数量(片)：</span>{{ form.number || 0}} <span
						style="margin-left: 30rpx ;">已领数量(片)：</span>{{ form.receivedNumber || 0 }}</view>
				<u-input placeholder="请输入本次领取数量" focus style="margin: 20rpx 0;" v-model="form.gainNumber" type="number"
					:border="border" />
				<u-button type="primary" @click="saveMaterials">确定</u-button>
			</view>
		</u-popup>

		<u-picker title="请选择产品仓位" mode="selector" v-model="showSpace" :range="spaceList" rangeKey="title"
			@confirm="selectSpace"></u-picker>
		<u-picker title="请选择仓库" mode="selector" v-model="showWarehouse" :range="warehouseList" rangeKey="title"
			@confirm="selectWarehouse"></u-picker>
	</view>
</template>

<script>
	import MescrollMixins from '@/components/mescroll-uni/mescroll-mixins';
	import ListMxin from './mixins/ListMxin';
	export default {
		mixins: [MescrollMixins, ListMxin],
		data() {
			return {
				show: false,
				showSpace:false,
				showWarehouse:false,
				warehouseIndex:-1,
				spaceIndex:-1,
				queryParam: {},
				fileList: [],
				text: null,
				number: null,
				border: true,
				spaceList: [],
				warehouseList:[],
				// url: {
				// 	list: 'bizOrderMaterialList'
				// },
				form: {},
				current: 0,
			}
		},

		computed: {
			top() {
				return this.CustomBar + 49
			},
		},
		onLoad(options) {
			this.queryParam.id = options.id
			this.queryParam.currentIndex = +options.currentIndex
		},
		methods: {
			/**
			 * @选择仓库
			 * @param {Object} item
			 * @param {Number} index
			 */
			showWarehouseSelect(item,index){
				this.warehouseIndex = index
				this.$u.api.allWarehouseList(item).then(res=>{
					if(res.code == 200){
						this.warehouseList = res.data || []
						this.warehouseList = this.warehouseList.map(v=>{
							
								let obj = {
									title: v.warehouseName,
									value: v.id
								}
								return obj
						})
						if(this.warehouseList.length){
							this.showWarehouse = true
						}else{
							this.$u.toast('没有发现仓库')
						}
					}else{
						this.$u.toast(res.msg)
					}
				})
			},
			selectSpace(index){
				let item = this.list[this.spaceIndex]
				item.spaceId = this.spaceList[index].value
				item.spaceName = this.spaceList[index].title
				
				      let params = {
				        warehouseId: item.warehouseId,
				        productId: item.productId,
				        spaceId: item.spaceId
				      }
				// this.$u.api.getInventory(params).then(res=>{
				// 	if(res.code == 200){
				// 		if(res.data.list && res.data.list.length === 1){
				// 			item.stock = res.data.list[0].number
				// 			this.list.splice(this.spaceIndex,1,item)
				// 		}else{
				// 			if(res.data.list && res.data.list.length == 0){
				// 				this.$u.toast('库存不足')
				// 			}else{
				// 				this.$u.toast('库存异常')
				// 			}
				// 		}
				// 	}else{
				// 		this.$u.toast(res.msg)
				// 	}
				// })
				this.list.splice(this.spaceIndex,1,item)
				console.log(item,666);
			},
			/**
			 * @选择仓库
			 * @param {Number} index
			 */
			selectWarehouse(index){
				let item = this.list[this.warehouseIndex]
				item.warehouseId = this.warehouseList[index].value
				item.warehouseName = this.warehouseList[index].title
				this.list.splice(this.warehouseIndex,1,item)
			},
			
			/**
			 * @获取仓位
			 */
			showSpaceSelect(item,index) {
				this.spaceIndex = index
				this.$u.api.spaceListByWarehouseId(item).then(res => {
					console.log(res,200);
					if (res.code === 200) {
						let arr = res.data || []
						this.spaceList = arr.map(v => {
							let obj = {
								title: v.postion,
								value: v.id
							}
							return obj
						})
						
						if(this.spaceList.length){
							this.showSpace = true
						}else{
							this.$u.toast('没有发现仓位')
						}
						
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			addUnReceived(item, index) {
				console.log(item);
				item.number = (+item.number + 1).toFixed(2)
				this.list.splice(index, 1, item)
			},
			/**
			 * @选择item
			 * @param {Object} item
			 * @param {Object} index
			 */
			checkItem(item, index) {
				if (!!this.queryParam.currentIndex && !!item.id) return;
				this.$set(item, 'checked', !item.checked)
			},
			checkClick(item, index) {

			},
			showReceive(record) {
				this.show = true
				this.form = record
				this.form.gainStatus = 1
			},
			submit() {
				// let pages = getCurrentPages();
				// let prevPage = pages[pages.length - 2]; //上一个页面
				// prevPage.$vm.getList(); 
				// uni.navigateBack()
				let list = this.list.map(v => {
					// let obj={
					// 	productId:v.productId, //产品id
					// 	orderId:this.queryParam.id,// 销售单
					// 	gainStatus:v.gainStatus,// 领取类型 1-已存在物料 2-新增物料 3-删除物料
					// 	spaceId: v.spaceId,//仓位
					// 	warehouseId:v.warehouseId,// 仓库
					// 	gainNumber:v.number,// 领取数量
					// 	id:v.id
					// }
					// return obj
					v.productType = 2
					v.gainNumber = v.number
					v.orderId = this.queryParam.id
					return v
				})
				let param = {
					id: this.queryParam.id,
					materialList: list
				}
				this.$u.api.saveMaterials(param).then(res => {
					if (res.code == 200) {
						this.$u.toast('操作成功')
						setTimeout(() => {
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2]; //上一个页面
							prevPage.$vm.change(1)
							uni.navigateBack()
						}, 1500)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			saveMaterials() {
				this.show = false
				this.$u.api.saveMaterials([this.form]).then(res => {
					console.log('res :>> ', res);
				})
			},
			/**
			 * @title 删除商品
			 * @param {Object} item
			 * @param {number} index
			 * 
			 */
			deleteProduct() {
				let arr = this.list.filter(v => v.checked)
				if (!arr.length) {
					this.$u.toast('请选择商品')
					return;
				}
				for (let i = this.list.length - 1; i >= 0; i--) {
					let item = this.list[i]
					console.log(item, i);
					if (item.checked) {
						item.gainStatus = 3
					}
				}
			},
			/**
			 * i32
			 * @param {number} page 
			 * 获取列表数据
			 */
			loadData(page) {
				let params = {
					pageNum: page.num,
					pageSize: page.size
				}
				params = Object.assign(params, this.getQueryParams())
				//联网加载数据
				this.$u.api[this.url.list](params).then(res => {
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					let data = res.data
					//设置列表数据
					if (res.code == 200) {
						for (let annItem of data) {
							annItem.gainStatus = 1
							this.list.push(annItem)
						}
					}

					if (page.num == 1) {
						this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.data); //追加新数据
					}
					this.list = this.list.map(v => (this.$set(v, 'checked', false), v))
					this.mescroll.endBySize(data.length, data.length);
					this.$forceUpdate()
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 48px;
			height: 48px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}

	.info-index {
		width: 50rpx;
		height: 50rpx;
		border-radius: 8rpx;
		background-color: #2979ff;
		color: #fff;
		display: inline-block;
		text-align: center;
		line-height: 50rpx;
		margin-right: 10rpx;
	}

	.popup {
		margin: 20rpx;
	}

	.btn-plus {
		position: fixed;
		bottom: 160rpx;
		right: 60rpx;
		background-color: #fa3534;
		color: white;
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		text-align: center;
		line-height: 80rpx;
		z-index: 2;
	}

	.filter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #ffffff;
		border-bottom: 1px solid #F2F3F4;
	}

	.btn {
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.btn-add {
		background-color: #409eff;
		color: white;
	}

	.btn-delete {
		background-color: #FE0100;
		color: white;
	}
</style>